<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden; 
        /* height: 100%; */
        /* white-space: nowrap; */
        /* overflow: hidden; */
    }
    /* @media (max-width:1040px){
        .ivu-menu{
            overflow: hidden;
        }
    } */

    /* .ivu-menu{
        overflow: hidden;
    } */
    
    /* .layout-nav{
        width: 700px;
        height: 60px;
        margin: 0 auto;
    } */
    .tenant-bar{
        /* float:left; */
        background-color:transparent;
        /* overflow:hidden; */
        text-overflow:ellipsis;
        padding-left: 10px;
        width:360px;
        min-width:210px; 
        height:100%;
        font-size:14px;
    }

    .layout-logo{
        /* width: 100px;
        height: 30px; */
        /* background: #5b6270; */
        /* border-radius: 3px; */
        float: left;
        padding-left: 20px;
        padding-top: 10px;
        padding-right: 60px;
        /* position: relative; */
        /* top: 15px;
        left: 20px; */
    }
    .layout-name{
        float: left;
        padding-left: 20px;
    }
    .layout-nav{
        /* width: 420px; */
        margin: 0 auto;
        margin-right: 20px;
    }

    .wrapper-header{
        position: fixed;
        width: 100%;
        top: 0;
        right: 0;
        z-index: 1000;
    }
    .layout-footer-center{
        text-align: center;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <div class="wrapper-header">
                <Menu mode="horizontal" theme="light" @on-select="doTabChange" :active-name="currModule">
                    <div class="layout-logo">
                        <img src="../images/logo.svg"></img>
                    </div>
                    <!-- <div class="layout-name">
                        蜂办产品管理中心
                    </div> -->
                    <div class="layout-nav">
                        <MenuItem name="home">
                            <Icon type="ios-home-outline"></Icon>
                            首页
                        </MenuItem>
                        <MenuItem name="log">
                            <Icon type="ios-keypad"></Icon>
                            日志
                        </MenuItem>
                        <MenuItem name="meeting">
                            <Icon type="ios-list-outline"></Icon>
                            会议纪要
                        </MenuItem>
                        <MenuItem name="updateSchedule">
                            <Icon type="ios-calendar-outline"></Icon>
                            更新安排
                        </MenuItem>
                        <MenuItem name="roadmap">
                            <Icon type="map"></Icon>
                            roadmap
                        </MenuItem>
                            <MenuItem name="ops">
                            <Icon type="ios-paper-outline"></Icon>
                            运维记录
                        </MenuItem>
                    <!-- <div class="person-bar">
                        <div style="position:relative;display:inline">
                            <Button @click="toggleShowEditCard" type="primary">{{showEditCard?'收起':'添加'}}</Button>
                            <EditCard v-show="showEditCard" :edit="editData" @ok="postLog"  style="position:absolute;z-index:1000;background-color:white;right:0px"></EditCard>
                        </div>
                    </div> -->
                    </div>
                </Menu>
            </div>
            <Content :style="{padding: '0 50px',marginTop:'60px'}">
                <!-- <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <BreadcrumbItem>Components</BreadcrumbItem>
                    <BreadcrumbItem>Layout</BreadcrumbItem>
                </Breadcrumb> -->
                <!-- <div style="height:40%;overflow-y:auto;"> -->
                    <router-view></router-view>
                <!-- </div> -->
            </Content>
            <Footer class="layout-footer-center">2017-2018 &copy; JiangQifan</Footer>
        </Layout>

    </div>
</template>
<script>

    import { mapState, mapActions } from 'vuex'

    export default {
        components:{
            
        },
        data(){
            return {
                // currModule: "home"
                "showEdit":false,
                currentActiveKey: 'log'
            }
        },
        computed: {
                user(){
                    return this.$store.state.user
                },
                currModule: function(){
                    let module = "";
                    if(this.$route.params.functionId){
                        module = this.$route.matched[1].path.substring(1, this.$route.matched[1].path.indexOf("/:"));
                    }else{
                        module = this.$route.matched[1].path.substring(1, this.$route.matched[1].path.length);
                    }
                    
                    return module;
                }
            }
        ,
        methods: Object.assign(
            mapActions([
                'getUsers',
                'listLogs',
                'refresh',
                'getCurrentUser',
            ])
            ,{
                doTabChange: function(tabName){
                    // this.currModule = tabName;
                    this.$router.push("/" + tabName);
                },
            }
        ),
        mounted:function(){
            this.getUsers();
            this.getCurrentUser();
            this.refresh();
        }
    }
</script>